<template>
  <el-form class="add-rule-form"
           label-width="200px"
           ref="form"
           :model="form"
           v-loading="loading">
    <el-row :gutter="12">
      <el-col :span="24">
        <el-form-item :label="$t('label.rc')">
          <el-select :placeholder="$t('placeholder.ps')"
                     style="width:100%"
                     v-model="form.dataDictionaryValue">
            <el-option v-for="record in families"
                       :label="record.label"
                       :value="record.value"
                       :key="record.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('label.rn')">
          <el-input :placeholder="$t('placeholder.pe')"
                    v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('label.type')">
          <el-select :placeholder="$t('placeholder.ps')"
                     v-model="form.type">
            <el-option v-for="record in types"
                       :label="record.label"
                       :value="record.value"
                       :key="record.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24"
              v-if="form.type === '5'">
        <el-form-item :label="$t('label.an')">
          <el-select :placeholder="$t('placeholder.ps')"
                     clearable
                     v-model="form.appIds">
            <el-option v-for="record in apps"
                       :label="record.name"
                       :value="record.appId"
                       :key="record.appId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12"
              v-if="form.type === '5'">
        <el-form-item label="Pay Accounts">
          <el-input-number controls-position="right"
                           v-model="form.payUsers" />
        </el-form-item>
      </el-col>
      <el-col :span="12"
              v-if="form.type === '5'">
        <el-form-item label="Free Accounts">
          <el-input-number controls-position="right"
                           v-model="form.freeUsers" />
        </el-form-item>
      </el-col>
      <el-col :span="24"
              v-if="form.type === '4'">
        <el-form-item :label="$t('label.mnobots')">
          <el-input-number controls-position="right"
                           v-model="form.bots" />
        </el-form-item>
      </el-col>
      <el-col :span="24"
               v-if="form.type === '13' || form.type==='5'">
        <!-- Integration -->
        <el-form-item :label="$t('label.software')">
          <el-select :placeholder="$t('placeholder.ps')"
                     clearable
                     v-model="form.softwareId">

            <el-option-group v-for="group in msps"
                             :key="group.label"
                             :label="group.label">
              <el-option v-for="item in group.children"
                         :key="item.id"
                         :label="item.dictValue"
                         :value="item.subjectCode">
              </el-option>
            </el-option-group>

          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="24"
              v-if="form.type === '9'">
        <!-- Integration limit-->
        <el-form-item label="Quantity of Integration">
          <el-input-number controls-position="right"
                           v-model="form.integrations" />
        </el-form-item>
      </el-col>
      <el-col :span="24"
              v-if="form.type === '10'">
        <el-form-item label="Bot Limit">
          <el-input-number controls-position="right"
                           v-model="form.botLimit" />
          <span>&nbsp;&nbsp;{{$t('paywall.peruser')}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="Description">
          <el-input v-model="form.description"
                    type="textarea"
                    :rows="6"
                    :placeholder="$t('placeholder.pe')">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('JSON Meta Data')">
          <el-input type="textarea"
                    v-model="form.meta"
                    :placeholder="$t('placeholder.pn')">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { get } from 'lodash'
import { types, families } from '@/components/storybook/settings/chargebee'
import useMsps from '@/components/storybook/hooks/useMsps'

const description = ``

export default {
  name: 'AddRuleForm',

  data () {
    return {
      form: {
        type: '9',
        description
      },
      loading: false,
      types,
      apps: [],
      msps: [],
      families
    }
  },

  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        this.loading = true
        const [apps, msps] = await Promise.all([this.getApps(), useMsps()])

        this.apps = apps
        this.msps = msps
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async getApps () {
      const { getAppsMarketListApi } = this.$interface.reports
      const params = {

      }
      let { data: response } = await getAppsMarketListApi(params)

      if (response.code !== 0) {
        throw get(response, 'msg', '')
      }
      return get(response, 'data', [])
    }

  }
}
</script>
<style lang="scss" scoped>
.add-rule-form {
  width: 100%;

  .el-input-number {
    line-height: 32px;
    ::v-deep .el-input-number__decrease {
      line-height: 15px;
    }
    ::v-deep .el-input-number__increase {
      line-height: 15px;
    }
  }
  .el-date-editor {
    ::v-deep .el-range-separator {
      line-height: 27px;
    }
    ::v-deep .el-range__icon {
      line-height: 27px;
    }
  }
}
</style>
